<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/kongzhitai.css">
    <link rel="stylesheet" href="../font/nav_icon/iconfont.css">
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>

<body>
    <div class="header">
        <div class="header_top_box1">
            <span class="iconfont icon-diannao"></span>
            <div class="icon_left_text">
                <p class="shuzi">35</p>
                <p>今日维修任务</p>
            </div>
        </div>
        <div class="header_top_box2">
            <span class="iconfont icon-rili"></span>
            <div class="icon_left_text">
                <p class="shuzi">20</p>
                <p>今日维修完成</p>
            </div>
        </div>
        <div class="header_top_box3">
            <span class="iconfont icon-daiweixiu"></span>
            <div class="icon_left_text">
                <p class="shuzi">15</p>
                <p>待执行维修</p>
            </div>
        </div>
        <div class="header_top_box4">
            <span class="iconfont icon-lingdao"></span>
            <div class="icon_left_text">
                <p class="shuzi">18</p>
                <p>今日维修人员</p>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="weixiuxian_box">
            <div class="weixiuxian">
                <h4>维修线1</h4>
                <div class="qingkuang_box clear">
                    <div class="qingkuang_left">
                        <span>今日维修情况</span>
                        <span class="xian1">已完成10</span>
                        <span>/今日维修任务16</span>
                    </div>
                    <div class="qingkuang_right">
                        <span class="iconfont icon-lingdao"></span>
                        <span>维修人员16</span>
                    </div>
                </div>
                <div class="progress pro_bg">
                    <div id="pro" class="progress-bar progress-bar1 " role="progressbar">
                        <span class="sr-only">40% Complete (success)</span>
                    </div>
                </div>
            </div>
            <div class="weixiuxian">
                <h4>维修线2</h4>
                <div class="qingkuang_box clear">
                    <div class="qingkuang_left2">
                        <span>今日维修情况</span>
                        <span class="xian2">已完成10</span>
                        <span>/今日维修任务16</span>
                    </div>
                    <div class="qingkuang_right2">
                        <span class="iconfont icon-lingdao"></span>
                        <span>维修人员16</span>
                    </div>
                </div>
                <div class="progress pro_bg2">
                    <div id="pro2" class="progress-bar progress-bar2 " role="progressbar">
                        <span class="sr-only">40% Complete (success)</span>
                    </div>
                </div>
            </div>
            <div class="weixiuxian">
                <h4>维修线3</h4>
                <div class="qingkuang_box clear">
                    <div class="qingkuang_left3">
                        <span>今日维修情况</span>
                        <span class="xian3">已完成10</span>
                        <span>/今日维修任务16</span>
                    </div>
                    <div class="qingkuang_right3">
                        <span class="iconfont icon-lingdao"></span>
                        <span>维修人员16</span>
                    </div>
                </div>
                <div class="progress pro_bg3">
                    <div id="pro3" class="progress-bar progress-bar3 " role="progressbar">
                        <span class="sr-only">40% Complete (success)</span>
                    </div>
                </div>
            </div>
            <div class="weixiuxian">
                <h4>维修线4</h4>
                <div class="qingkuang_box clear">
                    <div class="qingkuang_left4">
                        <span>今日维修情况</span>
                        <span class="xian4">已完成10</span>
                        <span>/今日维修任务16</span>
                    </div>
                    <div class="qingkuang_right4">
                        <span class="iconfont icon-lingdao"></span>
                        <span>维修人阮16</span>
                    </div>
                </div>
                <div class="progress pro_bg3">
                    <div id="pro4" class="progress-bar progress-bar4 " role="progressbar">
                        <span class="sr-only">40% Complete (success)</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="echart"></div>
        <canvas id="myChart" width="400" height="400"></canvas>

    </div>
    

    <script>
        var dom = document.getElementById("echart");
        var myChart = echarts.init(dom);
        var app = {};

        var option;

        option = {
            title: {
                text: '维修量统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['维修1线', '维修2线', '维修3线', '维修4线']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['11日', '12日', '13日', '14日', '15日', '16日', '17日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                    name: '维修1线',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '维修2线',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '维修3线',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '维修4线',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }



        $('#pro').css({
            width: '70%'
        })
        $('#pro2').css({
            width: '30%'
        })
        $('#pro3').css({
            width: '60%'
        })
        $('#pro4').css({
            width: '95%'
        })
    </script>
</body>

</html>